<section class="section">
  <div class="container mt-5">
    <div class="row">
      <div
        class="col-12 col-sm-10 offset-sm-1 col-md-8 offset-md-2 col-lg-8 offset-lg-2 col-xl-8 offset-xl-2"
      >
        <div class="card card-primary">
          <div class="card-header">
            <h4>Register</h4>
          </div>
          <div class="card-body">
            <form method="POST" id="registerForm">
              <div class="row">
                <div class="form-group col-12">
                  <label for="frist_name">Name</label>
                  <input
                    id="frist_name"
                    type="text"
                    class="form-control"
                    name="frist_name"
                    autofocus
                  />
                  <div class="invalid-feedback" data-error="name"></div>
                </div>
              </div>
              <div class="form-group">
                <label for="email">Email</label>
                <input
                  id="email"
                  type="email"
                  class="form-control"
                  name="email"
                />
                <div class="invalid-feedback" data-error="email"></div>
              </div>
              <div class="row">
                <div class="form-group col-6">
                  <label for="password" class="d-block">Password</label>
                  <input
                    id="password"
                    type="password"
                    class="form-control pwstrength"
                    data-indicator="pwindicator"
                    name="password"
                  />
                  <div id="pwindicator" class="pwindicator">
                    <div class="bar"></div>
                    <div class="label"></div>
                  </div>
                  <div class="invalid-feedback" data-error="password"></div>
                </div>
                <div class="form-group col-6">
                  <label for="password2" class="d-block"
                    >Password Confirmation</label
                  >
                  <input
                    id="password2"
                    type="password"
                    class="form-control"
                    name="password-confirm"
                  />
                  <div class="invalid-feedback" data-error="password2"></div>
                </div>
              </div>
              <div class="form-group">
                <div class="custom-control custom-checkbox">
                  <input
                    type="checkbox"
                    name="agree"
                    class="custom-control-input"
                    id="agree"
                  />
                  <label class="custom-control-label" for="agree">
                    I agree with the terms and conditions
                  </label>
                  <div class="invalid-feedback" data-error="agree"></div>
                </div>
              </div>
              <div class="form-group">
                <button
                  type="button"
                  class="btn btn-primary btn-lg btn-block"
                  id="registerButton"
                >
                  Register
                </button>
              </div>
            </form>
          </div>
          <div class="mb-4 text-muted text-center">
            Already Registered? <a href="Login">Login</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
